<template>
    <div>
        <view class="avatar">
            <u-avatar src="/static/avatar.jpg" size="90"></u-avatar>
        </view>

        <view style="width: 90%;">
            <u--form labelWidth="90" labelAlign="center" :model="admin" :rules="rules" ref="uForm">
                <u-form-item label="用户名" prop="username" class="item">
                    <u--input v-model="admin.username"></u--input>
                </u-form-item>
                <u-form-item label="密码" prop="password" class="item">
                    <u--input v-model="admin.password" password></u--input>
                </u-form-item>
                <!-- 用户协议 -->
                <u-form-item label=" " prop="agreement" class="item">
                    <view class="agreement">
                        <u-checkbox-group v-model="admin.agreement">
                            <u-checkbox name="agreement" label="我已阅读并同意" />
                            <navigator class="url" url="/pages/index/agreement">用户服务协议、隐私政策</navigator>
                        </u-checkbox-group>
                    </view>
                </u-form-item>
            </u--form>
        </view>

        <u-button type="warning" icon="pushpin-fill" @click="onLogin" :customStyle="btnStyle">登录</u-button>
        <u-toast ref="uToast"></u-toast>
    </div>
</template>
<script>
export default{
    data()
    {
        return{
            admin:{
                username:'',
                password:'',
                agreement:[]
            },
            rules:{
                'username':{
                    type:'string',
                    required:true,
                    message:'请输入用户名',
                    trigger:['blur','change']
                },

                'password':{
                    type:'string',
                    required:true,
                    message:'请输入密码',
                    trigger:['blur','change']
                },

                'agreement':{
                    type:'array',
                    required:true,
                    message:'请勾选用户服务协议、隐私政策',
                    trigger:['change','blur']
                }
            },
            btnStyle:{
                marginTop:'10px'
            }
        }
    },
    methods:{
        onLogin(){
            this.$refs.uForm.validate().then(async ()=>{
                let data ={
                    username:this.admin.username,
                    password:this.admin.password
                }

                let result = await this.$u.api.admin.login(data);

                if(result && result.code === 1)
                {
                    this.$refs.uToast.show({
                        type:'success',
                        message:result.msg,
                        complete:()=>{
                            // 存储session
                            uni.setStorageSync('admin',result.data);
                            
                            // 跳转到后台首页
                            uni.reLaunch({
                                url:'/pages/admin/index'
                            })
                        }
                    })
                }
                
                console.log(result);
            }).catch((err)=>{
                console.log(err);
            })
        }
    }
}
</script>

<style>
.avatar{
    display: flex;
    height: 150px;
    justify-content: center;
    align-items: center;
}

.agreement {
    margin-top: .7em;
    display: flex;
}

.agreement .url {
    color: #3c9cff;
    margin-left: 2px;
}
</style>